<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex实现瀑布流布局</title>
		<style type="text/css">
			body,
			html {
			  position: relative;
			  /*width: 100%;*/
			  height: 100%;
			  background: #0D0630;
			  font-family: "PT Mono", monospace;
			}
			
			.masonry {
			  display: flex;
			  flex-flow: column wrap;/*控制列，并且允许换行*/
			  width: 100%;
			  height: auto;
			}
			@media screen and (min-width: 400px) {
			  .masonry {
			    height: 1600px;
			  }
			}
			@media screen and (min-width: 600px) {
			  .masonry {
			    height: 1300px;
			  }
			}
			@media screen and (min-width: 800px) {
			  .masonry {
			    height: 1100px;
			  }
			}
			@media screen and (min-width: 1100px) {
			  .masonry {
			    height: 800px;
			  }
			}
			
			.item {
			  box-sizing: border-box;
			  padding: 10px;
			  counter-increment: item-counter;
			}
			.item__content {
			  position: relative;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  /*height: 220px;*/
			  font-size: 40px;
			  color: #070319;
			  background: currentColor;
			  box-sizing: border-box;
			  color: #18314F;
			}
			.item__content:hover {
			  background: #22446e;
			}
			.item__content:before {
			  position: absolute;
			  top: 0;
			  left: 0;
			  font-size: 13px;
			  width: 2em;
			  height: 2em;
			  line-height: 2em;
			  text-align: center;
			  font-weight: bold;
			  background-color: #8aafdc;
			  content: counter(item-counter);
			}
			.item__content:after {
			  color: #010003;
			  /*content: "ಠ‿ಠ";*/
			}
			.item__content--small {
			  color: #8BBEB2;
			  /*height: 100px;*/
			}
			.item__content--small:hover {
			  background: #a5cdc3;
			}
			.item__content--small:before {
			  background: #080f0d;
			}
			.item__content--small:after {
			  /*content: "♥◡♥";*/
			}
			.item__content--medium {
			  color: #E6F9AF;
			  /*height: 175px;*/
			}
			.item__content--medium:hover {
			  background: #f2fcd5;
			}
			.item__content--medium:before {
			  background: #546e08;
			}
			.item__content--medium:after {
			  /*content: "◔ᴗ◔";*/
			}
			.item__content--large {
			  color: #384E77;
			  /*height: 280px;*/
			}
			.item__content--large:hover {
			  background: #456093;
			}
			.item__content--large:before {
			  background: #c9d3e5;
			}
			.item__content--large:after {
			  /*content: "ಠ_๏";*/
			}
			.img-bg{
				width: 100px;
				height: 80%;
			}
			.img-bg img{
				height: 100%;
				width: 100%;
			}
			.item__content p{
				color: white;
				font-size: 13px;
			}
		</style>
	</head>
	<body>
		<div class="masonry">
			<div class="item">
				<div class="item__content">
					<div class="img-bg">
						<img src="img/12.jpeg"/>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
					<div class="img-bg">
						<img src="img/1.png"/>
					</div>
					<p>ncbsuyfgsyfgsjdbcxhjgcuysag s速度發貨速有風格的vb驚魂甫定耍的好V</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
					<div class="img-bg">
						<img src="img/10.jpeg"/>
					</div>
					<p>ncbsuyfgsyfgsjdbcxhjgcuysag s速度發貨速有風格的vb驚魂甫定耍的好V</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
					<div class="img-bg">
						<img src="img/11.jpeg"/>
					</div>
					<p>ncbsuyfgsyfgsjdbcxhjgcuysag s速度發貨速有風格的vb驚魂甫定耍的好V</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
					<div class="img-bg">
						<img src="img/2.jpeg"/>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="item__content">
					<div class="img-bg">
						<img src="img/3.jpg"/>
					</div>
					<p>basgs你手機都會發生读過後覅U回復收到回復</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--large">
					<div class="img-bg">
						<img src="img/4.jpeg"/>
					</div>
					<p>没V女生短髮工藝師傅告訴覅拉薩河封建時代復活幣孫不會覅都會在你下面呢</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--medium">
					<div class="img-bg">
						<img src="img/4.jpeg"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
					<div class="img-bg">
						<img src="img/5.jpg"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content">
					<div class="img-bg">
						<img src="img/6.jpeg"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--large">
					<div class="img-bg">
						<img src="img/7.jpeg"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content">
					<div class="img-bg">
						<img src="img/8.jpeg"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--small">
					<div class="img-bg">
						<img src="img/9.jpeg"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
			<div class="item">
				<div class="item__content item__content--large">
					<div class="img-bg">
						<img src="img/hot2.gif"/>
					</div>
					<p>是那哈ui的身份不滿V明白了擦何從啊什麼錯，模擬現場開獎喜歡VV就能形成VU和對方</p>
				</div>
			</div>
		</div>
	</body>
</html>
